<template>
    <div id="action" v-if="historyVisible">
        <el-button v-if="historyNum > 19" @click="goPurpose" type="primary">专项练习</el-button>
        <el-button @click="goHistory" type="danger">查看错误历史</el-button>
    </div>


    <div class="gap" v-if="historyVisible"></div>

    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>拼音速读</span>
            </div>
        </template>
        <el-form :label-width="label_width">
            <el-form-item label="音节：">
                <el-checkbox-group v-model="letter_config">
                    <el-checkbox checked :class="{ block: isMobile }" label="前鼻音" name="type" />
                    <el-checkbox checked :class="{ block: isMobile }" label="后鼻音" name="type" />
                    <el-checkbox checked :class="{ block: isMobile }" label="复韵母" name="type" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="时间间隔：">
                <el-input-number v-model="letter_sleep" :min="1" :max="10" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="goLetter">开始</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <div class="gap"></div>

    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>口算数量挑战</span>
                <span class="tip">范围为0则不练习此项;时间单位为秒</span>
            </div>
        </template>
        <el-form :label-width="label_width">
            <el-form-item label="加法范围：">
                <el-input-number v-model="plus_range" :min="2" />
            </el-form-item>
            <el-form-item label="减法范围：">
                <el-input-number v-model="sub_range" :min="2" />
            </el-form-item>
            <el-form-item label="乘法范围：">
                <el-input-number v-model="multi_range" :min="0" :max="9" />
            </el-form-item>
            <el-form-item label="挑战时间：">
                <el-input-number v-model="limit" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="goQuickNum">开始</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <div class="gap"></div>

    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>口算时间挑战</span>
                <span class="tip">范围为0则不练习此项</span>
            </div>
        </template>
        <el-form :label-width="label_width">
            <el-form-item label="加法范围：">
                <el-input-number v-model="plus_range" :min="2" />
            </el-form-item>
            <el-form-item label="减法范围：">
                <el-input-number v-model="sub_range" :min="2"  />
            </el-form-item>
            <el-form-item label="乘法范围：">
                <el-input-number v-model="multi_range" :min="0" :max="9" />
            </el-form-item>
            <el-form-item label="挑战数量：">
                <el-input-number v-model="limit" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="goQuickTime">开始</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import tools from '../utils/tools.js'

export default {
    name: 'Home',

    data() {
        return {
            label_width: '120px',

            plus_range: 100,
            sub_range: 100,
            multi_range: 9,
            limit: 100,

            letter_config: [],
            letter_sleep: 2,

            isMobile: false,

            historyVisible: false,
            historyNum: 0,
        }
    },

    created() {
        this.isMobile = tools.isMobile()

        let history = tools.getHistory()
        if (history && history.length > 0) {
            this.historyVisible = true
            let total = 0
            for(let item of history){
                total += item.items.length
            }
            this.historyNum = total
        }
    },

    methods: {
        goHistory() {
            this.$router.push({ name: "history" })
        },

        goPurpose() {
            this.$router.push({ name: "purpose" })
        },

        goLetter() {
            let qian = 0
            let hou = 0
            let fu = 0
            console.log(this.letter_config)
            if (this.letter_config.indexOf('前鼻音') > -1) {
                qian = 1
            }
            if (this.letter_config.indexOf('后鼻音') > -1) {
                hou = 1
            }
            if (this.letter_config.indexOf('复韵母') > -1) {
                fu = 1
            }
            this.$router.push({ name: 'letter', query: { sleep: this.letter_sleep, qian: qian, hou: hou, fu: fu } })
        },
        goQuickNum() {
            const data = {
                limit: this.limit,
                plus_range: this.plus_range,
                sub_range: this.sub_range,
                multi_range: this.multi_range
            }
            this.$router.push({ name: 'quickNum', query: data })
        },
        goQuickTime() {
            const data = {
                limit: this.limit,
                plus_range: this.plus_range,
                sub_range: this.sub_range,
                multi_range: this.multi_range
            }
            this.$router.push({ name: 'quickTime', query: data })
        }
    }
}
</script>

<style>
.card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.tip {
    color: grey;
    font-size: 0.8em;
}

.block {
    display: block;
}

#action {
    text-align: right;
}
</style>

